<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>redux计数器</title>
		<script src="js/react.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/react-dom.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/redux/4.0.0-beta.2/redux.min.js"></script>
	</head>

	<body>
		<div id="count">
			
		</div>
		<script type="text/babel">
			const defaultState=0;
			const reducer = (state=defaultState,action)=>{
				switch (action.type){
					case 'onIncrement':
						return state+1;
						break;
					case 'onDecrement':
						return state-1;
						break;
					default:
						return state;
						break;
				}
			};
			const store = Redux.createStore(reducer);
			const Count=({value,onIncrement,onDecrement})=>{
				return (
					<div>
						<h1>{value}</h1>
						<button onClick={onIncrement}>+</button>
						<button onClick={onDecrement}>-</button>
					</div>					
				);
			};
			const render=()=>{
				ReactDOM.render(
					<Count value={store.getState()} onIncrement={()=>store.dispatch({type:'onIncrement'})} onDecrement={()=>store.dispatch({type:'onDecrement'})}/>,
					document.getElementById('count')
				);
			};
			render();
			store.subscribe(render);
		</script>
	</body>

</html>